<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="static/js/echarts.min.js"></script>
    <script type="application/javascript" src="static/js/bmap.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=RLejNlF8CcIqDMTQOgFbIBS0jrC24ceL"></script>
    <script type="application/javascript" src="static/js/jquery-3.5.1.min.js"></script>

</head>
<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 850px;height:800px;" ></div>
<script type="text/javascript">

    const station_url = "static/data/station_info.json";

    const api_url = "/clickcounts"

    var geoCoorMap;

    // 基于准备好的dom，初始化echarts实例

    var myChart;

    //赋值数据方法
    const reciData = function (data) {
        var res = [];
        for (var i =0;i<data.length;i++){
            var geoCoord = geoCoorMap[data[i].station]
            if (geoCoord){
                res.push({
                    name : data[i].station,
                    value : geoCoord.concat(data[i].count)
                })
            }
        }
        return res
    }
    
    $.get(station_url,function (infData) {
        $.get(api_url,function (clickData) {
            const data = clickData
            geoCoorMap= infData

            //console.log(data)
            console.log(geoCoorMap)


            myChart= echarts.init(document.getElementById('main'));



            //console.log(reciData(data))


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '站点点击数量',
                    left: "center"

                },
                tooltip: {
                    trigger : "item"
                },

                bmap :{
                    //百度地图
                    center :[-73.985693,40.748445],
                    zoom : 13 ,  //缩放级别
                    roam : true,
                    layoutCenter : ["20%","40%"],
                    layoutSize : 100
                },

                /*

                legend: {
                    data:['浏览器']
                },
                xAxis: {
                    data: ["IE","谷歌","Firefox","360极速","360绿色","QQ浏览器"]
                },
                yAxis: {},

                 */
                series: [
                    {
                    name: "点击数量",
                    type: "scatter",
                    coordinateSystem : 'bmap',
                    data: reciData(data),
                    symbolSize:function (val) {
                        return val[2]*3

                    },
                    encode:{
                        value: 2
                    },
                    label:{
                        formatter :"{b}",
                        position:"right",
                        show:false

                    },
                    emphasis:{
                        label: {
                            show : true
                        }
                    }
                }]
            };

            //console.log('---'+option.series[0].data[0].name)
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);



            //实时推送的更新
            initEventSource()

        })
    })
    
    

    function initEventSource() {
        //请求地址,静态
        const url = "/timeclick"


        //接受实时推送数据的监听EventSource对象接收
        const dataSource = new EventSource(url);

        dataSource.onmessage= function (event){
            console.log("SSE--->收到数据")
            const vo = JSON.parse(event.data)
            //调用更新实时数据方法
            updateClickChart(vo)
        }

    }
    //更新图标
    function updateClickChart(vo) {
        const data = vo;
        const option = {
            series: [
                {
                    name: "点击数量",
                    type: "scatter",
                    coordinateSystem : 'bmap',
                    data: reciData(data),
                    symbolSize:function (val) {
                        return val[2]*3
                    },
                }
            ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);




    }



</script>


</body>
</html>